<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表页</title>
  <link rel="stylesheet" href="./CSS/index.css">
  <link rel="stylesheet" href="./CSS/reset.css">
  <link rel="stylesheet" href="./CSS/list.css">
</head>

<body>
  <!-- 顶部开始 -->
  <div class="top">
    <div class="wrap top-box">
      <div class="top-l">
        <span></span>
        <a href="#" class="place">山西</a>
        <a href="#" class="cut">切换至企业版</a>
      </div>
      <div class="top-r">
        <ul>
          <li><a href="login.html">你好，<span class="red">请登录</span></a></li>
          <li></li>
          <li><a href="register.html">免费注册</a></li>
          <li></li>
          <li><a href="#">我的订单</a></li>
          <li></li>
          <li><a href="#">我的京东<span></span></a></li>
          <li></li>
          <li><a href="#" class="red">企业采购<span></span></a></li>
          <li></li>
          <li><a href="#">商家服务<span></span></a></li>
          <li></li>
          <li><a href="#">网站导航<span></span></a></li>
          <li></li>
          <li><a href="#">手机京东</a></li>
          <li></li>
          <li><a href="#">网站无障碍</a></li>
        </ul>
      </div>
    </div>


  </div>
  <!-- 顶部结束 -->

  <!-- 头部开始 -->
  <div class="header">
    <div class="wrap head-box">
      <div class="logo">
        <a href="index.html">
          <img src="./img/beij.png" alt="" style="height: 100%;">
        </a>

      </div>
      <div class="search">
        <input type="text" placeholder="小米手机" class="header-search">
        <span></span>
        <button></button>
        <!-- 实现模糊查询 -->
        <div class="search-list">

        </div>
      </div>
      <a href="#" class="shopcar">
        我的购物车
        <i class="count">8</i>
      </a>
      <div class=" head-botton">
        <ul>
          <li><a href="#">京东生鲜</a></li>
          <li><a href="#">京东家电</a></li>
          <li><a href="#">秒杀</a></li>
          <li><a href="#">京东超市</a></li>
          <li><a href="#">京东手机</a></li>
          <li><a href="#">京东五金城</a></li>
          <li><a href="#">电脑数码</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">PLUS会员</a></li>
          <li><a href="#">便宜包邮</a></li>
        </ul>
      </div>
    </div>

  </div>
  <!-- 头部结束 -->

  <!-- list开始 -->
  <div class="sk_container wrap">
    <div class="sk_bd " style="overflow: hidden;">
      <ul>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
        <li class="sk_goods">
          <img src="./img/redmi.png" alt="">
          <h5 class="sk_goods_title">小米Redmi 红米手机k50 2K直屏智能5G手机天玑8100 全新未激活 银迹 8G+256G</h5>
          <p class="sk_goods_price"><em>￥5499</em> <del>￥5999</del></p>
          <div class="sk_goods_progress">
            已售<em>70%</em>

            <div class="bar">
              <div class="bar_in"></div>
            </div>
            剩余<em>30</em>件
          </div>
          <a href="#" class="sk_goods_buy">立即抢购</a>

        </li>
      </ul>
    </div>
    <div class="page">
      <span class="page_num">
        <a href="#" class="page_prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">...</a>
        <a href="#" class="page_next">下一页&gt;&gt;</a>
      </span>
      <span class="page_skip">
        共10页 到第<input type="text">页<button>确定</button>
      </span>
    </div>
  </div>

  <!-- list结束 -->

  <!-- 底部开始 -->
  <div class="footer">
    <p class="link">关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益</p>
    <p class="copy">Copyright © 2004-2024 京东JD.com 版权所有</p>
  </div>
  <!-- 底部结束 -->
</body>

</html>